<!--
 * @Description: ...登陆页面
 * @Date: 2020-12-15 00:37:51
 * @LastEditTime: 2022-10-31 15:49:00
 * @msg: ..
-->
<template>
  <div class="userlogin">
    <el-dialog
      v-model="dialogFormVisible"
      :close-on-click-modal="false"
      :title="['用户登录', '用户注册', '重置密码'][type - 1]"
      width="350px"
    >
      <div class="-mt-3 login" v-if="type == 1">
        <div class="input_div">
          <el-input
            v-model="formData.username"
            placeholder="请输入邮箱（用于数据同步和通知）"
            clearable
          >
          </el-input>
          <el-input
            v-model="formData.password"
            placeholder="请输入6-18位密码"
            class="mt-4"
            show-password
            @keyup.enter="login_submit"
          >
          </el-input>
        </div>
        <div class="flex justify-between mt-2">
          <span class="text-blue-400 hover" @click="type = 2">注册账号</span>
          <span class="hover" @click="type = 3">忘记密码</span>
        </div>
        <div class="mt-4 flex">
          <el-button
            class="rounded-full bg-blue-400 w-full"
            type="primary"
            @click="login_submit"
          >
            登录
          </el-button>
        </div>
      </div>
      <div class="-mt-3 register" v-if="type == 2">
        <div class="input_div">
          <el-input
            v-model="register.username"
            placeholder="请输入邮箱（用于数据同步和通知）"
            clearable
          >
          </el-input>
          <el-input
            v-model="register.code"
            placeholder="请输入验证码"
            class="mt-4"
            clearable
          >
            <template #append>
              <el-button
                @click.once="getRegisterCode(register.username)"
                v-if="time == 60"
                >获取</el-button
              >
              <el-button v-else>{{ time }}s</el-button>
            </template>
          </el-input>
          <el-input
            v-model="register.password"
            placeholder="请输入6-18位密码"
            class="mt-4"
            show-password
            @keyup.enter="login_submit"
          >
          </el-input>
        </div>
        <div class="flex justify-between mt-2">
          <span class="text-blue-400 hover" @click="type = 1">已有账号去登录</span>
        </div>
        <div class="mt-4 flex">
          <el-button
            class="rounded-full bg-blue-400 w-full"
            type="primary"
            @click="register_submit"
          >
            注册
          </el-button>
        </div>
      </div>
      <div class="-mt-3 register" v-if="type == 3">
        <div class="input_div">
          <el-input v-model="forgetPass.username" placeholder="请输入邮箱" clearable>
          </el-input>
          <el-input
            v-model="forgetPass.code"
            placeholder="请输入验证码"
            class="mt-4"
            clearable
          >
            <template #append>
              <el-button
                @click.once="getRegisterCode(forgetPass.username)"
                v-if="time == 60"
                >获取</el-button
              >
              <el-button v-else>{{ time }}s</el-button>
            </template>
          </el-input>
          <el-input
            v-model="forgetPass.password"
            placeholder="请输入6-18位密码"
            class="mt-4"
            show-password
          >
          </el-input>
        </div>
        <div class="flex justify-between mt-2">
          <span class="text-blue-400 hover" @click="type = 1">已有账号去登录</span>
        </div>
        <div class="mt-4 flex">
          <el-button
            class="rounded-full bg-blue-400 w-full"
            type="primary"
            @click="forget_submit"
          >
            提交
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, onUnmounted } from "vue";
import emitter from "@/util/emitter.js";
import ajax from "@/util/ajax.js";
import { encode } from "@/util/rsa.js";
import cache from "../util/cache";
import { useStore } from "vuex";
import { ElNotification } from "element-plus";
import sm from "../util/sm2";
const store = useStore();
const type = ref(1);
const time = ref(60);
const dialogFormVisible = ref(false);
const formData = reactive({
  username: "",
  password: "",
});
const register = reactive({
  username: "",
  password: "",
  code: "",
});
const forgetPass = reactive({
  username: "",
  password: "",
  code: "",
});
const forget_submit = () => {
  ajax({
    url: "/user/forgetPass",
    method: "post",
    data: {
      username: sm.encode(forgetPass.username),
      password: sm.encode(forgetPass.password),
      code: forgetPass.code,
    },
  }).then((el) => {
    if (el.code == 1) {
      formData.username = forgetPass.username;
      formData.password = forgetPass.password;
      ElNotification.success("重置成功,已为您自动登录");
      login_submit();
    } else {
      ElNotification.error(el.msg);
    }
  });
};
const register_submit = () => {
  ajax({
    url: "/user/register",
    method: "post",
    data: {
      username: sm.encode(register.username),
      password: sm.encode(register.password),
      code: register.code,
    },
  }).then((el) => {
    if (el.code == 1) {
      formData.username = register.username;
      formData.password = register.password;
      ElNotification.success("从现在起你就是我的主人了,已为您自动登录");
      login_submit();
    } else {
      ElNotification.error(el.msg);
    }
  });
};
const login_submit = () => {
  ajax({
    url: "/user/login",
    method: "post",
    data: {
      username: sm.encode(formData.username),
      password: sm.encode(formData.password),
    },
  }).then((el) => {
    if (el.code == 1) {
      cache.set("token", el.data.token).set("user_id", el.data.user_id);
      store.dispatch("loginIn");
      dialogFormVisible.value = false;
    } else {
      ElNotification.error(el.msg);
    }
  });
};
const getRegisterCode = (mail) => {
  ajax({
    url: "/api/getMailCode",
    method: "post",
    data: {
      mail: sm.encode(mail),
    },
  }).then((el) => {
    if (el.code == 1) {
      ElNotification.success(el.msg);
      let timeStatus = setInterval(() => {
        time.value -= 1;
        if (time.value <= 0) {
          clearInterval(timeStatus);
          time.value = 60;
        }
      }, 1000);
    } else {
      ElNotification.error(el.msg);
    }
  });
};
const open = (types = 1) => {
  type.value = types;
  dialogFormVisible.value = true;
};
emitter.on("openLogin", open);
onUnmounted(() => {
  emitter.off("openLogin", open);
});
</script>
<style lang="less"></style>
